<template>
        <div id="viewAll">
        <navbar :title="title"></navbar>
        <div class="placeholder"></div>
        <div class="comment-list">
            <div class="user">
                <div class="avator">
                    <img :src="list.avatar" alt="">
                </div>
                <div class="msg">
                    <div class="name">{{list.username}}</div>
                    <div class="time">{{list.created_at }}</div>
                </div>
            </div>
                <div class="text">{{list.content}}</div>
            <div class="f-footer">
                <div class="m-diy-btn dz" :class="{active:list.is_like==1}" @click="dzHandle(list.userid,list.id,gameId,list)">
                    <i class="icon_dz"></i> {{list.like_num}}
                </div>
                <div class="m-diy-btn pl">
                    <router-link :to="{path:'/gameDetail/publish',query:{gameId:gameId,username:list.username,pid:list.id,by_userid:list.userid}}">
                         <i class="icon_pl" ></i> {{list.comment_num}}
                    </router-link>
                </div>
            </div>
        </div>
        <div  v-if="list.reply_list">
            <scroll class="more-list" ref="scroll" 
                :data="list.reply_list" 
                :scrollY="scrollY" 
                :scrollX="scrollX"
                :bounce="bounce" 
                :pullup="pullup" 
                @scrollToEnd="_getMoreList">
                <div class="main-container">
                    <div class="answer-container">
                        <p class="total" v-if="list.reply_list.length">全部{{total}}条回复</p>
                        <div class="answer-list" v-for="(item,index) in list.reply_list" :key=index>
                            <div class="user">
                                <div class="avator">
                                    <img :src="item.avatar" alt="">
                                </div>
                                <div class="msg">
                                    <div class="name">{{item.username}}</div>
                                    <div class="time">{{item.created_at}}</div>
                                </div>
                            </div>
                            <p v-if="item.is_reply==1" class="isReply">回复 <span>{{item.by_username}}：</span></p>
                            <div class="text">{{item.content}}</div>
                            <div class="f-footer">
                                <div class="m-diy-btn dz" :class="{active:item.is_like==1}" @click="dzHandle(item.userid,item.id,gameId,item)" >
                                    <i class="icon_dz"></i> {{item.like_num}}
                                </div>
                                <div class="m-diy-btn pl">
                                    <a href="javascript:;" @click="toPublish(gameId,list.id,item.userid,item.username)">
                                         <i class="icon_pl"></i> {{item.comment_num}}
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </scroll>
            <!-- 下拉加载显示 -->
            <div class="loadlist" v-if="list.reply_list.length" >
                <loadinglist :row="row"  :more="more"></loadinglist>
            </div>
        </div>
        <div class="footer-wrapper">
             <div class="input" @click="toPublish(gameId,list.id,list.userid,list.username)"><span>回复评论</span></div>
        </div>
    </div>
</template>

<script>
    import navbar from 'common/navbar'
    import Scroll from "common/scroll"
    import Loadinglist from "common/LoadingList"
    import {getCommentList,gameLike} from 'api/game_box'
    import {mapState,mapMutations} from 'vuex' 
    import {logStatus} from 'api/login'
    export default {
        data(){
            return{
                title:"评论详情",
                row: true,     //loading文字水平显示
                isload: false, //是否正在加载
                scrollY: true,  //垂直滚动
                scrollX: false, //水平滚动
                pullup: true,   //上拉加载
                beforeScroll: true,
                bounce: false,  //动画
                more:true,      //下拉加载是否还有更多
                id:'',
                gameId:'',
                userId:'',
                page:1,
                list:[],
                total:'',
            }
        },
        created(){
            this.init();
        },
        methods:{
            init(){
                this.id= this.$route.query.id;
                this.gameId=this.$route.query.gameId;
                getCommentList(this.gameId,this.page,this.id).then(res=>{
                     if (res.data.error == 0) {
                         this.total=res.data.content.total;
                         this.list=res.data.content.data[0];
                         let totalPage=res.data.content.totalPage;
                         this.isload = false;
                        if(this.page==totalPage||totalPage==0){
                            this.more = false;
                            this.isload = true;
                        }
                     }
                })
            },
            dzHandle(userId,id,gameid,item){
                if(item.is_like==1){
                    return;
                }
                gameLike(userId,id,gameid).then(res=>{
                    if (res.data.error == 0) {
                        this.SET_RELOAD(true);
                        item.is_like=1;
                        item.like_num++;
                    }
                })
            },
            _getMoreList(){
               if (this.isload == true) {
                    return;
                }
                this.page++;
                this.isload = true;
                getCommentList(this.gameId,this.page,this.id).then(res=>{
                    if (res.data.error == 0) {
                            let totalPage=res.data.content.totalPage;
                            res = res.data.content.data[0].reply_list;
                            this.isload = false;
                            this.list.reply_list = this.list.reply_list.concat(res);
                            if(this.page==totalPage){
                                this.more = false;
                                this.isload = true;
                            }
                    }
                })
            },
            toPublish(gameId,pid,by_userid,username){
                logStatus().then(res=>{
                    if (res.data.error == 0) {
                            this.$router.push({
                                path:'/gameDetail/publish',query:{gameId:gameId,pid:pid,by_userid:by_userid,username:username}
                            });
                        }else{
                            this.$router.replace({
                            path: '/login',
                            query: {redirect:  this.$router.currentRoute.fullPath}
                        })
                    }
                })
            },
            ...mapMutations(['SET_RELOAD'])
        },
        filters:{
                filtertimestamp(time){
                let date = new Date(time*1000);
                return formatDate(date, 'yyyy-MM-dd');
            }
        },
        components:{
            navbar,
            Scroll,
            Loadinglist
        },
        mounted(){
            document.getElementsByClassName("gameDetail-con")[0].style="height:0";
        },
        beforeDestroy: function() {
            try{
                document.getElementsByClassName("gameDetail-con")[0].style="height:auto";
            }catch(err){

            }
        }
    }
</script>

<style scoped lang="scss">
@import "~styles/variable.scss";
@import "~styles/mixins.scss";
#viewAll{
    width: 7.5rem;
    margin:0 auto;
    position: fixed;
    z-index: 1000;
    padding-bottom:1.3rem;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: #f5f5f5;
    overflow: scroll;
    .user {
      display: flex;
      align-items: center;
      .avator {
        margin-right: 0.1rem;
        img {
          width: 0.7rem;
          height: 0.7rem;
          border-radius: 50%;
        }
      }
      .name {
        font-size: $font-size-m;
      }
      .time {
        font-size: 10px;
        color: #8e8e93;
      }
    }
    .text {
      margin-top: 0.1rem;
      padding-left: 0.8rem;
    }
    .f-footer {
      margin: 0.1rem 0;
      margin-left:0.8rem;
      display: flex;
      justify-content: flex-end;
      .m-diy-btn {
        margin-left: 0.4rem;
        display: flex;
        align-items: center;
      }
      .icon_pl {
        vertical-align: top;
        margin-right: 0.05rem;
        display: inline-block;
        width: 0.38rem;
        height: 0.32rem;
        background-size: 100% 100%;
        @include bg-image("../../assets/image/icon_pinglun");
      }
      .active{
        color:$color-focus;
        .icon_dz{
          @include bg-image("../../assets/image/icon_ydianzan");
        }
      }
      .icon_dz {
        margin-right: 0.05rem;
        display: inline-block;
        width: 0.37rem;
        height: 0.34rem;
        background-size: 100% 100%;
        @include bg-image("../../assets/image/icon_dianzan");
      }
    }
    .main-container{
        padding-bottom:0.2rem;
    }
    .comment-list{
        padding:0.2rem 0.36rem;
        background:#fff;
    }
    .answer-container{
         padding:0.1rem 0.36rem 0 0.36rem;
        .total{
            margin-bottom:0.2rem;
        }
        .answer-list{
           .f-footer{
              padding-bottom:0.2rem;
              border-bottom:1px solid #ddd;
           }
           &:last-child{
               .f-footer{
                   border:none;
               }
           }
        }
    }
    .footer-wrapper{
        width: 7.5rem;
        position:fixed;
        z-index:9999;
        height:1.3rem;
        bottom:0;
        display:flex;
        justify-content: center;
        align-items: center;
        background:#fff;
        border-top:1px solid #cbcbcb;
        .input{
            width:6.8rem;
            height:0.8rem;
            line-height:0.8rem;
            padding-left:0.24rem;
            border:1px solid #cbcbcb;
            border-radius:10px;
            span{
                color:#c7c6cb;
            }
        }
    }
}
.placeholder{
    width:100%;
    height:0.8rem;
}
.isReply{
    line-height:0.4rem;
    padding-left:0.8rem;
    span{
        color:$color-focus;
    }
}
</style>